<template>
  <div
       :class="[props.isShow ? 'flex':'hidden' , 'absolute top-0 left-0 my-16 h-screen w-screen bg-black/20']">
    <ul class="menu p-4 w-56 bg-base-100 text-base-content h-screen ">
      <!-- Sidebar content here -->
      <li class="text-base relative text-left">我的音乐</li>
      <router-link to="#">我喜欢的音乐</router-link>
      <router-link to="#">我上传的的音乐</router-link>
      <router-link to="#">我创建的歌单</router-link>
      <router-link to="#">我收藏的歌单</router-link>
    </ul>
  </div>
</template>
<script setup lang="ts">

let props = defineProps<{
  isShow: boolean
}>()

</script>

<style scoped>

</style>